<template>
	<view class="container">
		
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
			<swiper autoplay="true" interval="3000" duration="500" class="carousel" circular @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="naviageToPage(item.url)">
					<image :src="item.imgUrl" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>
		<!-- 分类 -->
		<view class="cate-section">
			<view v-for="(item, index) in categoryButtomList" :key="index" @click="naviageToPage(item.url)" class="cate-item">
				<image :src="item.imgUrl"></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		
		<view v-if="banner" @click="naviageToPage(banner.url)" class="ad-1">
			<image :src="banner.imgUrl" mode="scaleToFill"></image>
		</view>
		
		<!-- 公告 -->
		<view class="notice">
			<image class="notice_icon" src="../../static/gg.png" mode=""></image>
			<view class="uni-padding-wrap">
				<view class="uni-swiper-msg-myflex">
					<view class="left-Iocn">
						<icon class="iconfont icon-voice1"></icon>
					</view>
					<swiper class="limitp-hg" vertical="true" autoplay="true" circular="true" interval="3000">
						<swiper-item v-for="(item, index) in msg" :key="index">
							<navigator class="scrool-list-item">{{item}}</navigator>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		
		<!-- 四个板块 -->
		<view class="floor">
			<image class="floor_img" @click="toFloor(1)" src="../../static/04.png" mode=""></image>
			<image class="floor_img" @click="toFloor(2)" src="../../static/01.png" mode=""></image>
			<image class="floor_img" @click="toFloor(3)" src="../../static/03.png" mode=""></image>
			<image class="floor_img" @click="toFloor(4)" src="../../static/02.png" mode=""></image>
		</view>
		

	</view>
</template>

<script>

	export default {

		data() {
			return {
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [{
					imgUrl: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg"
				},{
					imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F42%2F31%2F01300001320894132989315766618.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617430359&t=5712fc85f6b49a918f04c1107db787db"
				}
				],
				windowSpuList: [],
				categoryPickList: [],
				categoryButtomList: [],
				salesTop: [],
				banner: undefined,
				isVip: false,
				msg : [
					'艺创空间即将上线，欢迎艺术爱好者参与',
					'本期活动将会继续一个月',
					'根据当前活动，做相应政策调整，请熟知'
				  ]
			};
		},
		onShow() {
			this.isVip = this.$api.isVip()
		},
		onLoad(options) {
			
		},
		methods: {
			toFloor(index){
				if(index == 1){//作品展示
					uni.navigateTo({
						url:'../workList/workList'
					})
				}else if(index == 2){ //匠人介绍
					uni.switchTab({
						url:'../writer/writer'
					})
				}else if(index == 3){//企业动态
					uni.switchTab({
						url:'../writer/writer'
					})
				}else if(index == 4){//艺创空间
					uni.navigateTo({
						url:'../workList/workList1'
					})
				}
			},
			async loadData() {
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				that.$api.request('integral', 'getIndexData', failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					//橱窗
					that.windowSpuList = data.windowRecommend
					//轮播
					data.advertisement.t1.forEach(item => {
						if (!item.color) {
							item.color = 'rgb(205, 215, 218)'
						}
					})
					that.carouselList = data.advertisement.t1
					that.swiperLength = data.advertisement.t1.length
					that.titleNViewBackground = data.advertisement.t1[0].color
					//分类精选
					if (data.advertisement.t2) {
						that.categoryPickList = data.advertisement.t2
					}
					//横幅
					if (data.advertisement.t3 && data.advertisement.t3.length > 0) {
						that.banner = data.advertisement.t3[0]
					}
					//热销
					if (data.salesTop) {
						that.salesTop = data.salesTop
					}
					//分类5Buttom
					if (data.advertisement.t4) {
						that.categoryButtomList = data.advertisement.t4
					}
					uni.hideLoading()
				})
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].color;
			},
			//详情页
			navToDetailPage(id) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${id}`
				})
			},
			navToWindowSuggestSpu(index) {
				const that = this
				uni.navigateTo({
					url: '/pages/product/detail?id=' + that.windowSpuList[index].spuId
				})
			},
			naviageToPage(page) {
				uni.navigateTo({
					url: page
				})
			}
		},
		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			uni.navigateTo({
				url: '/pages/product/search'
			})
		},
	
	}
</script>

<style lang="scss">
	
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	page{
		.cate-section{
			position:relative;
			z-index:5;
			border-radius:16upx 16upx 0 0;
			margin-top:-20upx;
		}
		.carousel-section{
			padding: 0;
			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}
			.carousel{
				.carousel-item{
					padding: 0;
				}
			}
			.swiper-dots{
				left:45upx;
				bottom:40upx;
			}
		}
	}
	/* #endif */
	
	
	page {
		background: #f5f5f5;
	}
	.m-t{
		margin-top: 16upx;
	}
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: .4s;
		}
	}
	.carousel {
		width: 100%;
		height: 350upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}
	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
	.notice{
		width: 100%;
		height: 60upx;
		margin: 20upx 0;
		display: flex;
		align-items: center;
		.notice_icon{
			width: 60upx;
			height: 40upx;
			margin-left: 30upx;
			margin-right: 15upx;
		}
		.uni-padding-wrap{
			width: 600px;
			.img-iocn{
				width: 50rpx;
				height: 50rpx;
			}
			.scrool-list-item{
				color: red;
			}
				
			.uni-swiper-msg-myflex{
				display: flex;
			}
			
			.left-Iocn{
				width: 40rpx;
				height: 60rpx;
				line-height: 60rpx;	
			}
			
			.limitp-hg{
				width:calc(100% - 50rpx);
				height: 60rpx;
				line-height: 60rpx;
			}
			
			.scrool-list-item{
				font-size: 28rpx;
			}
		}
		
	}
	.floor{
		width: 96%;
		margin: 0 auto;
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		.floor_img{
			width: 49%;
			height: 350upx;
			margin-bottom: 30upx;
		}
	}
	

	
</style>
